Skip to content

[CL-988] Update no items component to status lockup design - #22386

Draft
vleague2 wants to merge 8 commits into
mainfrom
uif/cl-988/status-layout
Draft

[CL-988] Update no items component to status lockup design#22386
vleague2 wants to merge 8 commits into
mainfrom
uif/cl-988/status-layout

Conversation

@vleague2

@vleague2 vleague2 commented Aug 12, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🎟️ Tracking

CL-988

📔 Objective

Update the no-items component to status-lockup and make changes to align with updated design:

  • Make graphic optional (current usages use SVGs)
  • Support icon tile as graphic option
  • Update spacing between elements
  • Add size options, including responsive behavior (automatically use small size below md breakpoint)

📸 Screenshots

Before After
Screenshot 2026-08-12 at 4 20 23 PM Screenshot 2026-08-12 at 4 20 19 PM

@vleague2
vleague2 requested review from a team and BryanCunningham August 12, 2026 20:22
@vleague2 vleague2 added the t:feature Change Type - Feature Development label Aug 12, 2026
BryanCunningham
BryanCunningham reviewed Aug 12, 2026
View reviewed changes
Comment thread apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@codecov

codecov Bot commented Aug 12, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 28.33333% with 43 lines in your changes missing coverage. Please review.
✅ Project coverage is 54.10%. Comparing base (967285c) to head (0b7229b).
⚠️ Report is 12 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...nents/src/status-lockup/status-lockup.component.ts 15.38% 22 Missing ⚠️
...en-sink/components/kitchen-sink-empty.component.ts 0.00% 3 Missing ⚠️
...lling/members/free-bitwarden-families.component.ts 0.00% 2 Missing ⚠️
...ager/projects/project/project-secrets.component.ts 0.00% 2 Missing ⚠️
...ervice-accounts/service-accounts-list.component.ts 0.00% 2 Missing ⚠️
.../secrets-manager/shared/projects-list.component.ts 0.00% 2 Missing ⚠️
...p/secrets-manager/shared/secrets-list.component.ts 0.00% 2 Missing ⚠️
...stories/kitchen-sink/kitchen-sink-shared.module.ts 0.00% 2 Missing ⚠️
...rowser/src/vault/popup/settings/trash.component.ts 0.00% 1 Missing ⚠️
...ets-manager-landing/request-sm-access.component.ts 0.00% 1 Missing ⚠️
... and 4 more
Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #22386      +/-   ##
==========================================
+ Coverage   54.06%   54.10%   +0.03%     
==========================================
  Files        4310     4311       +1     
  Lines      136980   137206     +226     
  Branches    21636    21674      +38     
==========================================
+ Hits        74065    74238     +173     
- Misses      57519    57565      +46     
- Partials     5396     5403       +7

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@vleague2 vleague2 changed the title [CL-988] Update no items component to status layout design [CL-988] Update no items component to status lockup design Aug 14, 2026
@vleague2 vleague2 added the ai-review Request a Claude code review label Aug 14, 2026
@github-actions

github-actions Bot commented Aug 14, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🤖 Bitwarden Claude Code Review

Overall Assessment: APPROVE

Re-reviewed after 0b7229b (fix icon story keys). The previously open suggestion is resolved: BITWARDEN_ICONS is a string array, so options: BITWARDEN_ICONS now renders real icon names in the Storybook picker instead of array indices. All four earlier findings on this PR are confirmed fixed and no new findings surfaced.

Re-verified across the full 78-file rename: no bit-no-items / NoItemsModule / NoItemsComponent references remain anywhere in the repo; every template using <bit-status-lockup> or <bit-svg> has both in scope (directly, or via SharedModule, SharedOrganizationModule, SecretsManagerSharedModule, or KitchenSinkSharedModule); every call site that previously relied on bit-no-items' default NoResults icon now supplies an explicit graphic; and TypographyModule removal from send-v2.component.ts is safe (no bitTypography left in that template).

Code Review Details

No findings at or above the reporting threshold.

Items examined and cleared:

  • empty:tw-hidden on the graphic/description/button wrappers — Angular's default preserveWhitespaces: false strips whitespace-only text nodes and :empty ignores the ng-content comment anchors, so the wrappers collapse as intended.
  • [class.tw-max-w-[600px]] / [class.tw-max-w-[480px]] bindings — Tailwind's clipAtBalancedParens trims the extra ] from the extracted candidate, so both arbitrary utilities are generated.
  • ResizeObserver lifecycle in StatusLockupComponent — guarded for jsdom, disconnected via DestroyRef, and measurableContainer() correctly walks past display: contents ancestors.
  • Graphic accessibility — SvgComponent sets aria-hidden / role="presentation" automatically when no ariaLabel is provided.
  • noResultsSvg visibility in table-v2.component.ts, projected <p bitTypography> → <div> conversions, and leftover tw-mt-4 on slot=title — all confirmed fixed in 77d1344 / b61f199.

claude[bot]
claude Bot reviewed Aug 17, 2026
View reviewed changes
Comment thread libs/components/src/table/v2/table-v2.component.ts Outdated
claude[bot]
claude Bot reviewed Aug 17, 2026
View reviewed changes
Comment thread apps/web/src/app/billing/members/free-bitwarden-families.component.html Outdated
claude[bot]
claude Bot reviewed Aug 17, 2026
View reviewed changes
Comment thread apps/web/src/app/admin-console/organizations/collections/vault.component.html Outdated
claude[bot]
claude Bot reviewed Aug 17, 2026
View reviewed changes
Comment thread libs/components/src/status-lockup/status-lockup.stories.ts
@bw-ghapp

bw-ghapp Bot commented Aug 17, 2026

Copy link
Copy Markdown
Contributor

Changes in this PR impact the Autofill experience of the browser client

BIT has tested the core experience with these changes and the feature flag configuration used by vault.bitwarden.com.

✅ Fortunately, these BIT tests have passed! 🎉

@bw-ghapp

bw-ghapp Bot commented Aug 17, 2026

Copy link
Copy Markdown
Contributor

Changes in this PR impact the Autofill experience of the browser client

BIT has tested the core experience with these changes and all feature flags disabled.

✅ Fortunately, these BIT tests have passed! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@claude claude[bot] claude[bot] left review comments
@BryanCunningham BryanCunningham BryanCunningham left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

ai-review Request a Claude code review t:feature Change Type - Feature Development

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@vleague2 @BryanCunningham